<template>
  <div class="warp">
    <ul class="content flex align-center just-between">
      <li class="flex align-center">
        <!-- 控制左侧菜单栏收缩 -->
        <div class="left pointer mr15">
          <el-icon @click="collapseBind">
            <component :is="isCollapse ? 'Expand' : 'Fold'" />
          </el-icon>
        </div>
        <!-- 面包屑 -->
        <div class="crumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, index) in navTitle"
              >{{ item.meta.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
      </li>
      <li class="right flex align-center">
        <!-- 消息通知 -->
        <el-popover placement="bottom" :width="300" trigger="click">
          <template #reference>
            <div class="el-dropdown-link pointer">
              <el-badge is-dot class="item">
                <el-icon>
                  <Bell />
                </el-icon>
              </el-badge>
            </div>
          </template>
          <div class="card">
            <div class="flex just-between align-center bb" style="height: 40px">
              <span>通知</span>
              <el-button
                class="button"
                type="text"
                @click="redBind"
                v-if="tongzhiList.length > 0"
              >
                全部已读
              </el-button>
            </div>
            <el-scrollbar height="300px">
              <ul class="list" v-if="tongzhiList.length > 0">
                <li
                  class="item pdtb10"
                  v-for="(item, index) in tongzhiList"
                  :key="index"
                >
                  <div>{{ item.title }}</div>
                  <div class="text-tipc mgtb5 f12">
                    {{ item.content }}
                  </div>
                  <div class="text-tipc f12">{{ item.time }}</div>
                </li>
              </ul>
              <div v-else>
                <el-empty :image-size="100"></el-empty>
              </div>
            </el-scrollbar>
          </div>
        </el-popover>
        <!-- 浏览器全屏按钮 -->
        <el-tooltip content="全屏模式" placement="bottom" effect="light">
          <div class="ico-box mglr20 pointer" @click="handleFullScreen">
            <el-icon>
              <FullScreen />
            </el-icon>
          </div>
        </el-tooltip>
        <!-- 头像 -->
        <el-avatar
          :size="25"
          icon="el-icon-user-solid"
          class="ml10"
        ></el-avatar>
        <el-dropdown class="ml5" @command="handleCommand">
          <span class="el-dropdown-link pointer">
            admin
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">个人中心</el-dropdown-item>
              <el-dropdown-item command="2" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import screenfull from "screenfull"; //浏览器全屏展示
import axios from "@/utils/axios";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { localRemove } from "@/utils";
export default {
  name: "Index",
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      navTitle: [], //导航栏面包屑
      isCollapse: computed(() => store.state.isCollapse), //左侧收缩标识
      tongzhiList: [], //通知列表
      isFullscreen: false, //是否全屏
    });

    onMounted(() => {
      tongzhi(); //获取通知列表
    });
    //导航栏面包屑
    watch(
      () => route.matched,
      (newVal) => {
        state.navTitle = newVal;
      }
    );

    //控制左侧菜单栏收缩
    const collapseBind = () => {
      store.dispatch("asyncSetIsCollapse");
    };
    //通知列表获取
    const tongzhi = async () => {
      const res = await axios.get("/api/tongzhi", { status: 2 });
      state.tongzhiList = res.data.list;
    };
    //全部已读
    const redBind = () => {
      state.tongzhiList = [];
    };
    //控制浏览器全屏
    const handleFullScreen = () => {
      if (!screenfull.isEnabled) {
        ElMessage("您的浏览器版本过低，不支持全屏浏览");
        return false;
      }
      screenfull.toggle();
    };
    //个人中心下拉点击回调
    const handleCommand = (command) => {
      switch (command) {
        case "1":
          ElMessage(`点击了 ${command}`);
          break;
        case "2":
          ElMessageBox.confirm("此操作将退出登录, 是否继续?", "提示", {
            type: "warning",
          })
            .then(() => {
              store.commit("setToken", "");
              localRemove();
              ElMessage({
                type: "success",
                message: "退出登录成功",
              });
              router.push("/login");
            })
            .catch(() => {});
          break;
      }
    };

    return {
      ...toRefs(state),
      collapseBind,
      handleCommand,
      redBind,
      handleFullScreen,
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  .content {
    height: 60px;
    .left {
      :deep(.el-icon svg) {
        font-size: 18px;
        color: $zy_col;
      }
    }
  }
}
</style>